<!-- ParentComponent.vue -->
<template>
  <div class="home">
    <!--    <h2>Vue 2 + Monaco Editor 代码补全演示</h2>-->
    <section class="sjjc-banner">
      <div class="container">
        <div class="row">
          <div class="new">
            <h3 style="text-align:left;">基于大模型及智能体的数据智能治理平台</h3>
            <h2 style="text-align:left;">DataAgent</h2>
            <p style="text-align:left;">如果把业务系统、数据、应用都当作终端来看，我们期望能够解决数据从任意终端到任意终端的处理和传输。</p>
            <div class="tags">
              <span>实时数据同步</span>
              <span>ETL/ELT数据开发</span>
              <span>API发布</span>
            </div>
<!--            <div class="a-box">-->
<!--              <a href="#" class="fdl_act_url" @click.prevent="handleDemoClick">-->
<!--                免费试用-->
<!--                <img src="" alt="箭头">-->
<!--              </a>-->
<!--              <a href="#" class="fdl_action" @click.prevent="handleConsultClick">方案咨询</a>-->
<!--            </div>-->
          </div>
        </div>
      </div>
    </section>

    <!-- 产品介绍 -->
    <section class="sjjc-wt">
      <div class="container">
        <div class="row">
          <div class="col-md-12 sjjc-title">
            <h2>从任意终端到任意终端的数据转换、传输，解决多源异构的数据集成问题</h2>
          </div>
          <div class="col-md-12 tags sedtags">
            <el-tag type="info" size="small">流批一体</el-tag>
            <el-tag type="info" size="small">实时数据同步</el-tag>
            <el-tag type="info" size="small">多源异构数据集成</el-tag>
            <el-tag type="info" size="small">数据服务</el-tag>
            <el-tag type="info" size="small">国产信创</el-tag>
            <el-tag type="info" size="small">平台运维管理</el-tag>
          </div>
          <div class="col-md-12 wt-img">
            <img src="@/assets/images/zhili.png" alt="FineDataLink介绍图">
          </div>
          <div class="col-md-12 list">
            <div class="item">
              <img src="https://src.fanruan.com/2023-website/2023-sem/sem-fdl/sjsj-wt01.png" alt="多源异构数据采集">
              <h3>多源异构数据采集</h3>
              <p>快速集成各大关系型数据库、大数据类、国产数据库类、NoSQL、接口、文件等7大类数据源</p>
            </div>
            <div class="item">
              <img src="https://src.fanruan.com/2023-website/2023-sem/sem-fdl/sjsj-wt02.png" alt="实时数据集成">
              <h3>实时数据集成</h3>
              <p>针对业务系统，基于日志的实时增量技术，低成本快速进行数据实时同步、备份</p>
            </div>
            <div class="item">
              <img src="https://src.fanruan.com/2023-website/2023-sem/sem-fdl/sjsj-wt03.png" alt="离线数据开发同步">
              <h3>离线数据开发同步</h3>
              <p>灵活的ETL和ELT数据开发方式和任务调度引擎模式，满足各种数据同步需求</p>
            </div>
            <div class="item">
              <img src="https://src.fanruan.com/2023-website/2023-sem/sem-fdl/sjsj-wt04.png" alt="数据服务">
              <h3>数据服务</h3>
              <p>面向业务统一数据出口与数据查询逻辑，快速完成API接口发布，同时提供监控和分析能力</p>
            </div>
          </div>
        </div>
<!--        <a href="#" class="demo-link" @click.prevent="handleDemoClick">-->
<!--          <span>体验Demo</span>-->
<!--        </a>-->
      </div>
    </section>

    <!-- 应用场景 -->
    <section class="sjjc-cj">
      <div class="top">
        <div class="container">
          <el-row>
            <el-col :span="24" class="sjjc-title">
              <h2>典型应用场景</h2>
            </el-col>
            <el-col :span="24">
              <div class="cj-tit">
                <el-tabs v-model="activeTab" @tab-click="handleTabClick" class="tab-tit">
                  <el-tab-pane
                      v-for="(item, index) in tabs"
                      :key="item.index"
                      :label="item.label"
                      :name="String(item.index)"
                      class="tab-item"
                  ></el-tab-pane>
                </el-tabs>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>

      <div class="bottom">
        <div class="container">
          <el-row>
            <el-col :span="24" class="tab-con">
<!--              <transition name="fade-slide">-->
                <div v-show="activeTab === String(tab.index)" v-for="tab in tabs" :key="tab.index" class="tab-content-item active">
                  <p class="txt" v-html="tab.txt"></p>
<!--                  <a :href="demoUrl" class="scene-button fdl_act_url">-->
<!--                    <span>体验Demo</span>-->
<!--                    <img-->
<!--                        src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z'/%3E%3C/svg%3E"-->
<!--                        alt="箭头"-->
<!--                    />-->
<!--                  </a>-->
                  <div class="img">
                    <img :src="tab.img" :alt="tab.alt" />
                  </div>
                </div>
<!--              </transition>-->
            </el-col>
          </el-row>

<!--          <a :href="demoUrl" class="demo-link fdl_act_url">-->
<!--            <span>体验Demo</span>-->
<!--          </a>-->
        </div>
      </div>
    </section>
    <!-- 申请试用 -->
    <section class="sjjc-sq">
      <div class="container">
        <div class="row">
          <div class="col-md-12 sjjc-title">
            <h2>申请试用</h2>
          </div>
          <div class="sq-list col-md-12">
            <a href="#" class="item" @click.prevent="handleDemoClick">
              <img src="https://src.fanruan.com/2023-website/2023-sem/sem-fdl/sjsj-sq01.png" alt="下载产品白皮书">
              <h4>下载产品白皮书</h4>
              <p>详解 FineDataLink功能特性和优势</p>
            </a>
            <div class=" jt">
              <div class="arrow"><em></em></div>
              <div class="arrow"><em></em></div>
              <div class="arrow"><em></em></div>
            </div>
            <a href="#" class="item" @click.prevent="handleDemoClick">
              <img src="https://src.fanruan.com/2023-website/2023-sem/sem-fdl/sjsj-sq02.png" alt="申请本地部署试用">
              <h4>申请本地部署试用</h4>
              <p>支持本地部署试用，提供技术专家答疑</p>
            </a>
            <div class=" jt">
              <div class="arrow"><em></em></div>
              <div class="arrow"><em></em></div>
              <div class="arrow"><em></em></div>
            </div>
            <a href="#" class="item" @click.prevent="handleDemoClick">
              <img src="https://src.fanruan.com/2023-website/2023-sem/sem-fdl/sjsj-sq03.png" alt="产品学习">
              <h4>产品学习</h4>
              <p>手把手教学资料，开发必备学习资料</p>
            </a>
          </div>
        </div>
      </div>
    </section>

    <!-- 客户案例 -->
    <section class="sjjc-case">
      <div class="container">
        <div class="row">
          <div class="col-md-12 sjjc-title">
            <h2>客户案例</h2>
          </div>
          <div class="col-md-12 case-box">
            <el-carousel :interval="5000" arrow="always" ref="caseSwiper">
              <el-carousel-item v-for="(caseItem, index) in caseList" :key="index">
                <img :src="caseItem.logo" :alt="caseItem.name" >
                <p>{{ caseItem.description }}</p>
              </el-carousel-item>
            </el-carousel>
<!--            <button class="swiper_prev" @click="prevCase">-->
<!--              <i class="el-icon-arrow-left"></i>-->
<!--            </button>-->
<!--            <button class="swiper_next" @click="nextCase">-->
<!--              <i class="el-icon-arrow-right"></i>-->
<!--            </button>-->
          </div>
        </div>
      </div>
    </section>

    <!-- 合作客户 -->
<!--    <section class="sjjc-kh">-->
<!--      <div class="container-fluid">-->
<!--        <div class="row">-->
<!--          <div class="col-md-12 sjjc-title">-->
<!--            <h2>帮助各行各业客户获取数据成功</h2>-->
<!--          </div>-->
<!--          <div class="col-md-12">-->
<!--            <div class="sw-box">-->
<!--              <div class="kh-swiper">-->
<!--                <div class="item" v-for="(client, index) in clientList" :key="index">-->
<!--                  <img :src="client.logo" :alt="client.name">-->
<!--                  <div class="txt">{{ client.name }}</div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </section>-->

    <!-- 免费试用按钮 -->
    <section class="free_use_buttton">
      <h3>和30000+企业共同开启大数据分析之旅</h3>
      <p>专业的解决方案、先进的产品帮您实现业务的爆发式增长</p>
      <a href="#" class="center active-fr" @click.prevent="handleDemoClick">
        <span>免费试用</span>
      </a>
<!--      <p class="beian">-->
<!--        版权所有© 帆软软件有限公司-->
<!--        <a target="_blank" href="https://www.beian.gov.cn/portal/registerSystemInfo?recordcode=32020502000761">苏公网安备 32020502000761号</a>-->
<!--        <a target="_blank" href="https://www.miit.gov.cn/">苏ICP备18065767号</a>-->
<!--      </p>-->
    </section>
  </div>
</template>

<script>

import '@/assets/styles/home.css';
import MonacoEditor from '@/components/MonacoEditor.vue';

export default {
  name: 'HomeComponent',
  components: {
    MonacoEditor
  },
  data() {
    return {
      activeSceneTab: 0,
      sceneTabs: [
        {
          title: '数仓搭建',
          description: '可视化整合多源异构数据，<span>高效搭建企业级数据仓库</span>',
          image: 'https://src.fanruan.com/2023-website/2023-sem/sem-fdl/sjsj-cj01.png'
        },
        {
          title: '实时同步',
          description: '实时同步数据(跨地域、跨业务)，提升<span>业务数据时效性</span>',
          image: 'https://src.fanruan.com/2023-website/2023-sem/sem-fdl/sjsj-cj02.png'
        },
        {
          title: 'API数据资产',
          description: '依托于<span>API</span>构建企业级数据资产，互通共享',
          image: 'https://src.fanruan.com/2023-website/2023-sem/sem-fdl/sjsj-cj03.png'
        },
        {
          title: '数据备份',
          description: '云上数据快速下云备份，<span>提升数据管理规范性</span>',
          image: 'https://src.fanruan.com/2023-website/2023-sem/sem-fdl/sjsj-cj04.png'
        },
        {
          title: '业务自动化',
          description: '深化SaaS连接器，<span>为业务流程自动化提速</span>',
          image: 'https://src.fanruan.com/2023-website/2023-sem/sem-fdl/sjsj-cj05.png'
        }
      ],
      caseList: [
        {
          name: '中南建投',
          logo: 'https://src.fanruan.com/2023-website/2023-sem/sem-fdl/case01.png',
          description: '通过对异构数据源，进行实时数据同步，搭建分布式数仓，使得惠科在精益生产上的效率得到极大的提升。'
        },
        {
          name: '三一重机',
          logo: 'https://src.fanruan.com/2023-website/2023-sem/sem-fdl/index-logo07.png',
          description: '通过实时流数据处理，FineDataLink对EVI系统实时产生的大数据量进行集成处理，联合其他系统数据对接，配合FineDataLink实时异常预警，大大提高了三一重机的调试效率。'
        },
        {
          name: '安特威',
          logo: 'https://src.fanruan.com/2023-website/2023-sem/sem-fdl/case02.png',
          description: '对多个业务系统，进行数据的实时增量同步，在保证数据实时性的同时，完成了数据仓库的搭建，助力安特威精准运营与管理。'
        },
        {
          name: '浙江国贸',
          logo: 'https://src.fanruan.com/2023-website/2023-sem/sem-fdl/index-logo-zjgm.jpg',
          description: '外部数据统一接入，增强数据管控；数仓搭建，统一数据资产管理。实现数据共享，打破数据壁垒，推动企业整体效率提高、方式转变和效能提升，创造数字化应用与数字经济相互促进的新局面。'
        }
      ],
      clientList: [
        { name: '中南建投', logo: 'https://src.fanruan.com/2023-website/2023-sem/sem-fdl/sj01.png' },
        { name: '中国人寿保险股份有限公司', logo: 'https://src.fanruan.com/2023-website/2023-sem/sem-fdl/sj02.png' },
        { name: '江西中医药大学', logo: 'https://src.fanruan.com/2023-website/2023-sem/sem-fdl/sj03.png' },
        { name: '帝王洁具', logo: 'https://src.fanruan.com/2023-website/2023-sem/sem-fdl/sj04.png' },
        { name: '甘肃公路发展集团', logo: 'https://src.fanruan.com/2023-website/2023-sem/sem-fdl/sj05.png' },
        { name: '志邦家居', logo: 'https://src.fanruan.com/2023-website/2023-sem/sem-fdl/sj06.png' },
        { name: '鑫达集团', logo: 'https://src.fanruan.com/2023-website/2023-sem/sem-fdl/sj07.png' },
        { name: '三一重机', logo: 'https://src.fanruan.com/2023-website/2023-sem/sem-fdl/sj08.png' },
        { name: '东成', logo: 'https://src.fanruan.com/2023-website/2023-sem/sem-fdl/sj09.png' },
        { name: '沈阳电信工程局', logo: 'https://src.fanruan.com/2023-website/2023-sem/sem-fdl/sj10.png' },
        { name: '云南建投物流有限公司', logo: 'https://src.fanruan.com/2023-website/2023-sem/sem-fdl/sj11.png' },
        { name: '波司登国际控股有限公司', logo: 'https://src.fanruan.com/2023-website/2023-sem/sem-fdl/sj12.png' },
        { name: '小罐茶', logo: 'https://src.fanruan.com/2023-website/2023-sem/sem-fdl/sj13.png' },
        { name: '重庆惠科金渝光电科技有限公司', logo: 'https://src.fanruan.com/2023-website/2023-sem/sem-fdl/sj14.png' },
        { name: '苏州安特威阀门有限公司', logo: 'https://src.fanruan.com/2023-website/2023-sem/sem-fdl/sj15.png' },
        { name: '中国银联股份有限公司', logo: 'https://src.fanruan.com/2023-website/2023-sem/sem-fdl/sj16.png' },
        { name: '东风小康汽车有限公司', logo: 'https://src.fanruan.com/2023-website/2023-sem/sem-fdl/sj17.png' },
        { name: '绿城中国', logo: 'https://src.fanruan.com/2023-website/2023-sem/sem-fdl/sj18.png' }
      ],
      demoUrl: 'https://www.fanruan.com/actionform?action=demo-fdl&from=fanruansem&',
      activeTab: '3',
      tabs: [
        {
          index: 0,
          label: '数仓搭建',
          txt: '可视化整合多源异构数据，<span>高效搭建企业级数据仓库</span>',
          img: 'https://src.fanruan.com/2023-website/2023-sem/sem-fdl/sjsj-cj01.png',
          alt: '数仓搭建示意图'
        },
        {
          index: 1,
          label: '实时同步',
          txt: '实时同步数据(跨地域、跨业务)，提升<span>业务数据时效性</span>',
          img: 'https://src.fanruan.com/2023-website/2023-sem/sem-fdl/sjsj-cj02.png',
          alt: '实时同步示意图'
        },
        {
          index: 2,
          label: 'API数据资产',
          txt: '依托于<span>API</span>构建企业级数据资产，互通共享',
          img: 'https://src.fanruan.com/2023-website/2023-sem/sem-fdl/sjsj-cj03.png',
          alt: 'API数据资产示意图'
        },
        {
          index: 3,
          label: '数据备份',
          txt: '云上数据快速下云备份，<span>提升数据管理规范性</span>',
          img: 'https://src.fanruan.com/2023-website/2023-sem/sem-fdl/sjsj-cj04.png',
          alt: '数据备份示意图'
        },
        {
          index: 4,
          label: '业务自动化',
          txt: '深化SaaS连接器，<span>为业务流程自动化提速</span>',
          img: 'https://src.fanruan.com/2023-website/2023-sem/sem-fdl/sjsj-cj05.png',
          alt: '业务自动化示意图'
        }
      ]
    }
  },
  methods: {
    handleDemoClick() {
      this.$message({
        message: '已跳转到试用页面',
        type: 'success'
      });
    },
    handleTabClick(tab) {
      this.activeTab = tab.name;
    },
    handleConsultClick() {
      this.$message({
        message: '已跳转到咨询服务页面',
        type: 'info'
      });
    },
    prevCase() {
      const swiper = document.querySelector('.case-swiper');
      swiper.scrollBy({
        left: -300,
        behavior: 'smooth'
      });
    },
    nextCase() {
      const swiper = document.querySelector('.case-swiper');
      swiper.scrollBy({
        left: 300,
        behavior: 'smooth'
      });
    }
  }
};
</script>

